<template>
	<div class="list-page">
		<div class="item" v-for="item in topListData">
			<p>{{ item.categoryGroupName }}</p>
			<ul>
				<li v-for="v in item.items" @click="checkInitem(v.categoryId)">
					<span v-html="v.categoryName"></span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  	name: 'List',
  	data() {
  		return {
  			topListData: []
  		}
  	},
  	methods: {
  		...mapMutations([
			'checkCategoryId',
		]),

  		checkInitem(id) {
  			this.checkCategoryId(id)
  			this.$router.push('/c_list')
  		}
  	},
  	computed:{
		...mapState({
			categoryId: state => state.Play.categoryId,
		})
	},
  	created() {
  		this.$store.dispatch('getClassify').then((res) => {
        	this.topListData = res.data.data
      	})
  	},
}
</script>

<style lang="stylus" scoped>
.list-page
	background-color #f9f9f9
	padding-bottom 60px
	overflow hidden
	.item 
		margin-top 10px
		background-color #FFF
		padding 10px 10px 0
		p 
			text-align center 
			line-height 50px
			font-size 16px
	ul 
		&:after,&:before 
			content ""
			clear both
			visibility hidden
			display block
			zoom 1
		li 
			float left 
			width 33% 
			height 40px 
			line-height 40px
			text-align center
			box-sizing border-box 
			border 1px solid #eee
			border-top none
			border-left none
			&:nth-child(3n)
				border-right none 
			&:nth-child(-n+3)
				border-top 1px solid #eee 
</style>